<template>
  <view class="">
    <u-popup :customStyle="{ background: 'transparent' }" :safeAreaInsetBottom="false" :show="isShow" mode="center"
             @close="close">
      <view class="wrap">
        <image class="close" mode=""
               src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/close.png" @click="close"></image>
        <view v-if="isNotice === 0 && info" class="content">
          <view class="content-view">
            <view class="title"> 集合通知</view>
            <view v-if="info && info.createTime" class="time">
              {{ info.createTime }}
            </view>
            <view class="p">
              {{
                info.content
              }}
              <text v-if="linkPhone" @click="call">{{ linkPhone }}</text>
            </view>
            <view class="btn flex" @click="submit"> 报道</view>
          </view>
          <view v-if="info.assemblePlaceUrl" class="content-map">
            <view class="map-title"> 集合地点图片</view>
            <view class="map-image">
              <image :src="info.assemblePlaceUrl"></image>
            </view>
          </view>
        </view>
        <view v-if="isNotice === 1" class="content content1">
          <view class="notice">
            <view class="title"> 通知</view>
            <view class="rich">
              <text v-if="headline">{{ headline }}</text>
            </view>
            <view class="rich">
              <rich-text :nodes="info.content"></rich-text>
              <text v-if="linkPhone"
                    @click="call">{{ linkPhone }}
              </text>
            </view>
            <view v-if="assemblePlaceUrl" style="width: 484rpx;">
              <image :src="assemblePlaceUrl" style="width: 100%;"></image>
            </view>
          </view>
        </view>

        <view v-if="isNotice === 2" class="content content1">
          <view class="notice">
            <view class="title"> 行程通知</view>
            <view class="rich">
              <rich-text :nodes="info.content"></rich-text>
            </view>
            <view class="font">
              <view>{{ name }}</view>
              <view>{{ time }}</view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import {
  readMessage
} from "@/api/login.js";
import filter from "../../filter";

export default {
  data() {
    return {
      isShow: false,
      isNotice: 0, // 0: 集合通知 1:通知 2: 行程通知
      nodes: "",
      messageAssembleId: "",
      type: "",
      info: null,
      name: "",
      linkPhone: "",
      headline: '',
      assemblePlaceUrl: ''
    };
  },
  created() {
    uni.$on("message", this.getMessage);

    this.$event.on("closeThis", () => {
      this.isShow = false;
    });

    // let data = {
    // 	assemblePlaceName: "惠城区惠州市读者文化园(四环南路南200米)",
    // 	assemblePlaceUrl: "",
    // 	assemblePlaceX: 114.4589,
    // 	assemblePlaceY: 23.033518,
    // 	content: "荣发起了集合点名消息，请前往惠城区惠州市读者文化园(四环南路南200米)进行集合，请抵达后点击已到按钮报道，如有疑问，请致电：",
    // 	id: 200,
    // 	itineraryId: 129,
    // 	linkPhone: "15573027861",
    // 	messageId: 208,
    // 	messagePersonageCallId: 368,
    // 	name: "荣",
    // 	phone: "15573027861",
    // 	studentName: "周溢",
    // 	studentPhone: "14748186448",
    // 	type: 1,
    // }
    // this.initData(data);
    // console.log(this.socketObj)
  },
  methods: {
    getMessage(res) {
      let data = JSON.parse(res.data);
      // console.log(data);
      if (data === 1) {
        return;
      }
      this.initData(data);
      this.$event.notify("updataMessage", true);
    },
    initData(data) {
      console.log('输出消息', data);
      let {
        type,
        messagePersonageCallId,
        departTime,
        name,
        itineraryCreateTime,
      } = data;
      this.type = type;
      this.messageAssembleId = messagePersonageCallId;
      if (type === 1) {
        this.isNotice = 0;
        data.content = `${
            data.name ? data.name : ""
        }发起了集合点名消息，请前往${
            data.assemblePlaceName
        }进行集合，请抵达后点击已到按钮报道，如有疑问，请致电：`;
        this.linkPhone = data.linkPhone;
      }
      if (type === 0) {
        this.isNotice = 2;
        data.content = `${
            data.studentName ? data.studentName : ""
        }，您有一个旅行计划，将于${filter.setTime(
            departTime
        )}启程，请您提前准备好行李和心情，在${
            data.assemblePlaceName
        }集合，开启愉快的旅程。`;

        this.time = this.$filter.setTime(itineraryCreateTime);
        this.name = name;
      }
      if (type === 2) {
        this.isNotice = 1;
        this.headline = data.headline
        this.assemblePlaceUrl = data.assemblePlaceUrl
      }
      this.info = data;

      this.isShow = true;
    },
    show() {
      this.isShow = true;
      if (this.isNotice !== 0) {
        this.readMsg(1);
      }
    },
    close() {
      this.isShow = false;
      this.$event.notify("closeThis", {
        close: true,
      });
    },
    readMsg(onoff = 0) {
      readMessage({
        messageAssembleId: this.messageAssembleId,
        type: this.type,
      }).then((res) => {
        if (!onoff) {
          this.toast("报道成功");
          this.close();
        }
        this.$event.notify("changeNewsInfo", {
          updata: true,
        });
      });
    },
    submit() {
      this.readMsg();
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: this.linkPhone,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 670rpx;
  padding: 30rpx 0 40rpx;
  box-sizing: border-box;
  background: url("https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-h.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .close {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    top: 0;
    right: 0;
  }
}

.content {
  width: 550rpx;
  background: url("https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-b.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 60rpx 40rpx 90rpx;

  &-view {
    opacity: 1;
    border-radius: 40rpx;
    background: rgba(245, 245, 245, 1);
    border: 2rpx solid rgba(214, 214, 214, 1);
    padding: 30rpx;

    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      text-align: center;
    }

    .time {
      text-align: center;
      font-size: 16rpx;
      font-weight: 400;
      color: rgba(56, 56, 56, 1);
      text-align: center;
    }

    .p {
      font-size: 24rpx;
      font-weight: 400;
      line-height: 35rpx;
      color: rgba(56, 56, 56, 1);
      margin: 23rpx 0 74rpx;
    }

    .btn {
      width: 302.9rpx;
      height: 71.74rpx;
      // opacity: 1;
      // border-radius: 39.86rpx;
      // background: linear-gradient(180deg, rgba(53, 217, 158, 1) 0%, rgba(74, 223, 181, 1) 100%);
      // box-shadow:inset 0pt -14.7rpx 4.7rpx -11.76rpx rgba(0, 0, 0, 0.35);
      background: url("https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/baodao-btn.png") no-repeat 0 0 / 100% 100%;
      margin: 0 auto;
      font-size: 28.7rpx;
      font-weight: 700;
      letter-spacing: 0pt;
      color: rgba(255, 255, 255, 1);
    }
  }

  &-map {
    width: 550rpx;
    opacity: 1;
    margin-top: 20rpx;
    padding-bottom: 30rpx;
    border-radius: 40rpx;
    background: rgba(255, 255, 255, 1);
    border: 2rpx solid rgba(229, 229, 229, 1);

    .map-title {
      font-size: 28.7rpx;
      font-weight: 500;
      line-height: 41.55rpx;
      color: rgba(2, 99, 75, 1);
      padding: 24rpx 0 8rpx;
      text-align: center;
    }

    .map-image {
      width: 533rpx;
      margin: 0 auto;

      image {
        height: 250rpx;
        width: 100%;
      }
    }
  }

  .notice {
    padding: 13rpx 30rpx 30rpx;

    .title {
      text-align: center;
      font-size: 45rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }

    .rich {
      font-size: 30rpx;
      font-weight: 400;
      line-height: 47.83rpx;
      margin-top: 30rpx;
      color: rgba(56, 56, 56, 1);
    }
  }
}

.content1 {
  background-image: url("https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-b1.png");
}

.font {
  text-align: right;

  view {
    padding: 10rpx 0;
  }
}
</style>
